DeepWiki

02.b - Success-Page-&-GitHub-Connection

Relevant source files

This document covers the success page that users land on after completing payment, and the GitHub OAuth initiation flow that begins when they click "Connect GitHub". The success page serves as the critical bridge between payment completion and repository access provisioning, receiving the session_id from Stripe and encoding it into the GitHub OAuth flow for later correlation.

For information about the payment checkout flow that precedes this page, see Landing Page & Payment. For details about the OAuth callback that completes the GitHub connection, see OAuth Callback Handler.

Success Page OverviewLink copied!

The success page is implemented as a Next.js 14 App Router server component at app/success/page.tsx L10-L71

Its primary responsibilities are:

  1. Validate the presence of a session_id query parameter from Stripe
  2. Display payment confirmation and delivery timeline (1-9 hours)
  3. Provide GitHub connection instructions with video tutorial
  4. Initiate GitHub OAuth flow when user clicks "Connect GitHub"

The page accepts two query parameters via Next.js searchParams:

ParameterTypeRequiredPurpose
session_idstringYesStripe checkout session identifier
errorstringNoOAuth error code (e.g., "access_denied")

If no session_id is present, the page immediately redirects to the landing page app/success/page.tsx L17-L19

:

if (!session_id) {
  redirect("/")
}

This validation ensures users cannot access the success page without having completed payment.

Sources: app/success/page.tsx L10-L19

The success page uses shadcn/ui components to create a centered card interface:

If an error parameter is present (from failed OAuth attempts), a red-highlighted message appears app/success/page.tsx L31-L35

:

{error && (
  <div className="p-3 text-sm text-red-500 bg-red-50 rounded-md text-center">
    {error === "access_denied" ? "Access denied. Please try again." : "An error occurred. Please try again."}
  </div>
)}

An amber-colored alert box emphasizes repository selection security app/success/page.tsx L38-L40

:

Please select "Only select repositories" when installing the GitHub App.

This critical instruction prevents users from granting access to all their repositories, limiting the security exposure to only the repository they want analyzed.

A 15-second autoplay video demonstrates the GitHub App installation process app/success/page.tsx L44-L53

:

  • Hosted at https://cdn.vibecoders.school/assets/godeep-wiki.webm
  • Configured with autoPlay, loop, muted, and playsInline attributes
  • Wrapped in a bordered container for visual emphasis

Sources: app/success/page.tsx L21-L70

Diagram: Success Page to OAuth Initiation Flow

Sources: app/success/page.tsx L54-L59

app/api/auth/github/route.ts L4-L44

The /api/auth/github route handler app/api/auth/github/route.ts L4-L44

orchestrates the GitHub OAuth flow initialization.

The endpoint requires GITHUB_APP_SLUG to be configured app/api/auth/github/route.ts L5-L9

:

const appSlug = process.env.GITHUB_APP_SLUG

if (!appSlug) {
  return new Response("GitHub App Slug not configured", { status: 500 })
}

The app slug identifies the specific GitHub App installation URL (e.g., godeep-wiki-integration).

The critical correlation mechanism encodes the session_id into the OAuth state parameter app/api/auth/github/route.ts L11-L24

:

const { searchParams } = new URL(request.url)const sessionId = searchParams.get("session_id")const stateData = {  uuid: crypto.randomUUID(),  sessionId: sessionId || null,}const state = Buffer.from(JSON.stringify(stateData)).toString('base64')

This state object serves dual purposes:

  1. CSRF Protection: The UUID prevents cross-site request forgery attacks
  2. Session Correlation: The sessionId field links this OAuth flow back to the Stripe payment

Extensive logging tracks state creation app/api/auth/github/route.ts L22-L24

:

console.log("Creating OAuth state with session_id:", sessionId)
console.log("State data:", stateData)
console.log("Encoded state:", state)

These logs appear in Vercel's function logs and enable manual correlation when troubleshooting.

Sources: app/api/auth/github/route.ts L11-L24

The state parameter is stored in an HTTP-only cookie before redirecting to GitHub app/api/auth/github/route.ts L26-L34

:

const cookieStore = await cookies()cookieStore.set("github_oauth_state", state, {  path: "/",  secure: process.env.NODE_ENV === "production",  httpOnly: true,  maxAge: 60 * 60, // 1 hour})
PropertyValuePurpose
path/Cookie available to all routes
securetrue (production only)Requires HTTPS transmission
httpOnlytruePrevents JavaScript access (XSS mitigation)
maxAge3600 seconds1-hour expiration matches OAuth timeout

When the OAuth callback receives a state parameter from GitHub, it validates it against this cookie to confirm the request originated from this application. See OAuth Callback Handler for verification details.

Sources: app/api/auth/github/route.ts L26-L34

The final step constructs the GitHub App installation URL app/api/auth/github/route.ts L36-L43

:

const params = new URLSearchParams({  state,})redirect(`https://github.com/apps/${appSlug}/installations/new?${params.toString()}`)

This redirect sends users to GitHub's installation page where they:

  1. Review the app's requested permissions (Contents: Read-only, Metadata: Read-only)
  2. Select which repositories to grant access to
  3. Confirm installation

GitHub will then redirect back to the OAuth callback with the state parameter intact, preserving the session_id correlation.

Sources: app/api/auth/github/route.ts L36-L43

Diagram: Session ID Flow Through OAuth

Sources: app/success/page.tsx L54

app/api/auth/github/route.ts L11-L34

The codebase includes a RedirectTimer client component app/success/RedirectTimer.tsx L1-L22

that is not currently used in the success page but provides automatic redirection functionality.

export function RedirectTimer() {    const router = useRouter()    useEffect(() => {        const timer = setTimeout(() => {            router.push("/")        }, 10000)        return () => clearTimeout(timer)    }, [router])    return (        <p className="text-xs text-gray-400 mt-4">            Redirecting to home in 10 seconds...        </p>    )}
  • Automatically redirects to landing page after 10 seconds
  • Uses Next.js useRouter hook for client-side navigation
  • Cleans up timeout on component unmount
  • Displays countdown message to user

To enable auto-redirect, import and render this component in app/success/page.tsx

:

import { RedirectTimer } from "./RedirectTimer"// Add to CardContent:<RedirectTimer />

This feature might be useful if users don't complete GitHub connection and need to be redirected back to the landing page.

Sources: app/success/RedirectTimer.tsx L1-L22

The state parameter provides multi-layered security:

  1. Randomness: crypto.randomUUID() generates cryptographically secure random UUIDs
  2. Server-side verification: The callback validates state against the stored cookie
  3. Time-limited: 1-hour cookie expiration limits replay attack window
  4. HTTP-only: JavaScript cannot access the cookie, preventing XSS attacks

The amber warning box app/success/page.tsx L38-L40

is crucial for security:

Please select "Only select repositories" when installing the GitHub App.

If users select "All repositories", the GitHub App gains access to their entire account. While the app only has read-only permissions, limiting to specific repositories follows the principle of least privilege.

The secure flag on the OAuth state cookie app/api/auth/github/route.ts L31

ensures cookies are only transmitted over HTTPS in production, preventing man-in-the-middle attacks.

Sources: app/success/page.tsx L38-L40

app/api/auth/github/route.ts L29-L34

UI ElementFile PathLine NumbersPurpose
Success page componentapp/success/page.tsx10-71Main success page rendering
Session validationapp/success/page.tsx17-19Redirects if no session_id
GitHub button Linkapp/success/page.tsx54-59Initiates OAuth flow
OAuth GET handlerapp/api/auth/github/route.ts4-44Handles OAuth initiation
State constructionapp/api/auth/github/route.ts16-24Encodes session_id into state
Cookie storageapp/api/auth/github/route.ts26-34CSRF protection via cookie
GitHub redirectapp/api/auth/github/route.ts43Sends user to installation page
RedirectTimerapp/success/RedirectTimer.tsx6-22Auto-redirect component (unused)

The success page sits at the critical junction between payment and repository access:

  • Upstream: Receives session_id from Stripe checkout (Landing Page & Payment)
  • Downstream: Passes session_id through OAuth to callback handler (OAuth Callback Handler)
  • Purpose: Ensures the payment-to-installation correlation can be reconstructed from logs

Without the success page's encoding of session_id into the OAuth state parameter, there would be no way to link a GitHub installation back to the original payment. This correlation enables the manual workflow where the owner looks up payments in Stripe, finds matching installations in Vercel logs, and generates access tokens for repository cloning.

Refresh this wiki

Last indexed: 23 November 2025 (922b35)

On this page

Ask Devin about godeep.wiki-jb

02.b - Success-Page-&-GitHub-Connection | DeepWiki | godeep.wiki